<!DOCTYPE html>
<html lang="zh">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
    <meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
    <title>首页 - 光年(Light Year Admin V4)后台管理系统模板</title>
    <link rel="shortcut icon" type="image/x-icon" href="/static/assets/admin/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <link rel="stylesheet" type="text/css" href="/static/assets/admin/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="/static/assets/admin/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/assets/admin/css/style.min.css">
</head>

<body style="padding:10px;">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-xl-3">
                <div class="card bg-primary text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <span class="avatar-md rounded-circle bg-white bg-opacity-25 avatar-box">
                                <i class="mdi mdi-currency-cny fs-4"></i>
                            </span>
                            <span class="fs-4">102,125.00</span>
                        </div>
                        <div class="text-end">今日收入</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xl-3">
                <div class="card bg-danger text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <span class="avatar-md rounded-circle bg-white bg-opacity-25 avatar-box">
                                <i class="mdi mdi-account fs-4"></i>
                            </span>
                            <span class="fs-4">920,000</span>
                        </div>
                        <div class="text-end">用户总数</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xl-3">
                <div class="card bg-success text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <span class="avatar-md rounded-circle bg-white bg-opacity-25 avatar-box">
                                <i class="mdi mdi-arrow-down-bold fs-4"></i>
                            </span>
                            <span class="fs-4">34,005,000</span>
                        </div>
                        <div class="text-end">下载总量</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xl-3">
                <div class="card bg-purple text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <span class="avatar-md rounded-circle bg-white bg-opacity-25 avatar-box">
                                <i class="mdi mdi-comment-outline fs-4"></i>
                            </span>
                            <span class="fs-4">153 条</span>
                        </div>
                        <div class="text-end">新增留言</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">每周用户</div>
                    </div>
                    <div class="card-body">
                        <canvas class="js-chartjs-bars"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">交易历史记录</div>
                    </div>
                    <div class="card-body">
                        <canvas class="js-chartjs-lines"></canvas>
                    </div>
                </div>
            </div>
        </div>
        


        <div class="row">
            <div class="col-sm-12 col-lg-６">
                <div class="card">
                    <div class="card-header">
                        <h4>系统信息</h4>
                    </div>
                    <div class="card-body">
                        <table class="table table-responsive">
                            <tr>
                                <td>服务器操作系统：</td>
                                <td>{$sys_info.os} / {$sys_info.domain}</td>
                                <td>PHP 版本：</td>
                                <td>{$sys_info.php_version}</td>
                                <td>服务器环境：</td>
                                <td>{$sys_info.web_server}</td>
                            </tr>
                            <tr>
                                <td>Mysql 版本：</td>
                                <td>{$sys_info.mysql_version}</td>
                                <td>GD 版本</td>
                                <td>{$sys_info.gdinfo}</td>
                                <td>浏览器：</td>
                                <td>{$sys_info.user_agent} / {$sys_info.ip}</td>
                            </tr>
                            <tr>
                                <td>文件上传限制：</td>
                                <td>{$sys_info.fileupload}</td>
                                <td>最大占用内存：</td>
                                <td>{$sys_info.memory_limit}</td>
                                <td>最大执行时间：</td>
                                <td>{$sys_info.max_ex_time}</td>
                            </tr>
                            <tr>
                                <td>系统时间：</td>
                                <td>{$sys_info.sys_time}</td>
                                <td>Zlib支持：</td>
                                <td>{$sys_info.zlib}</td>
                                <td>Curl支持：</td>
                                <td>{$sys_info.curl}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    <script type="text/javascript" src="/static/assets/admin/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/assets/admin/js/popper.min.js"></script>
    <script type="text/javascript" src="/static/assets/admin/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/assets/admin/js/chart.min.js"></script>
    <!--引入chart插件js-->
    <script type="text/javascript" src="/static/assets/admin/js/main.min.js"></script>
    <!--cookie js-->
    <script type="text/javascript" src="/static/assets/admin/js/jquery.cookie.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(e) {
        //获取主题
        var the_site_theme = $.cookie('the_site_theme');
        //设置统计图全局字体颜色
        Chart.defaults.color = the_site_theme?'#FFFFFF':'#666';
        var $dashChartBarsCnt = jQuery('.js-chartjs-bars')[0].getContext('2d'),
            $dashChartLinesCnt = jQuery('.js-chartjs-lines')[0].getContext('2d');
        //统计图实例化后的对象
        var myBarChart = null;
        var myLineChart = null;

        //渲染统计图
        function createChart(){
            var $dashChartBarsData = {
                labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                datasets: [{
                    label: '注册用户',
                    borderWidth: 1,
                    borderColor: the_site_theme?'#FFFFFF':'#007bff',
                    backgroundColor: the_site_theme?'rgba(255, 255, 255, 0.175)':'rgba(0, 123, 255, 0.175)',
                    hoverBackgroundColor: the_site_theme?'rgba(255, 255, 255, 0.175)':'rgba(0, 123, 255, 0.175)',
                    hoverBorderColor: the_site_theme?'rgba(255, 255, 255, 0.175)':'rgba(0, 123, 255, 0.175)',
                    data: [2500, 1500, 1200, 3200, 4800, 3500, 1500]
                }]
            };
            var $dashChartLinesData = {
                labels: ['2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013',
                    '2014'
                ],
                datasets: [{
                    label: '交易资金',
                    data: [20, 25, 40, 30, 45, 40, 55, 40, 48, 40, 42, 50],
                    borderColor: the_site_theme?'#FFFFFF':'#007bff',
                    backgroundColor: the_site_theme?'rgba(255, 255, 255, 0.175)':'rgba(0, 123, 255, 0.175)',
                    borderWidth: 1,
                    fill: false,
                    lineTension: 0.5
                }]
            };
        
            if(myBarChart){
                myBarChart.destroy();
            }
            myBarChart = new Chart($dashChartBarsCnt, {
                type: 'bar',
                data: $dashChartBarsData
            });

            if(myLineChart){
                myLineChart.destroy();
            }
            myLineChart = new Chart($dashChartLinesCnt, {
                type: 'line',
                data: $dashChartLinesData,
            });
        }

        //监听body主题变化，如果变化了，改变统计图文字颜色重新渲染
        $(document).bind("DOMSubtreeModified",function(e){
            if(the_site_theme!=$.cookie('the_site_theme')){
                the_site_theme = $.cookie('the_site_theme');
                //重新设置字体颜色
                Chart.defaults.color = the_site_theme?'#FFFFFF':'#666';
                //然后渲染统计图
                createChart();
            }
        })

        //渲染统计图
        createChart();
    });
    </script>
</body>

</html>